<template>
  <div>
    <el-row :gutter="20">
      <!-- 检查项目 -->
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="`未检项目(${unpredictableItemsTotal})`" name="1">
            <UnpredictableItem></UnpredictableItem>
          </el-tab-pane>
          <el-tab-pane label="结果预览" name="2">
            <ResultPreview></ResultPreview>
          </el-tab-pane>
          <el-tab-pane label="异常结果" name="3">
            <AbnormalResult></AbnormalResult>
          </el-tab-pane>
          <el-tab-pane label="指导意见" name="4">
            <GuidingOpinion></GuidingOpinion>
          </el-tab-pane>
          <el-tab-pane label="复查项目" name="5">
            <ReviewProject></ReviewProject>
          </el-tab-pane>
          <el-tab-pane label="会诊结论" name="6">
            <MeetingConsultation></MeetingConsultation>
          </el-tab-pane>
          <el-tab-pane label="随访项目" name="7">
            <FollowUpProject></FollowUpProject>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 未检项目
import UnpredictableItem from "./UnpredictableItem";
// 结果预览
import ResultPreview from "./ResultPreview";
// 异常结果
import AbnormalResult from "./AbnormalResult";
// 指导意见
import GuidingOpinion from "./GuidingOpinion";
// 复查项目
import ReviewProject from "./ReviewProject";
// 会诊结论
import MeetingConsultation from "./MeetingConsultation";
// 随访项目
import FollowUpProject from "./FollowUpProject";

export default {
  name: "TableData",
  components: {
    // 未检项目
    UnpredictableItem,
    // 结果预览
    ResultPreview,
    // 异常结果
    AbnormalResult,
    // 指导意见
    GuidingOpinion,
    // 复查项目
    ReviewProject,
    // 会诊结论
    MeetingConsultation,
    // 随访项目
    FollowUpProject,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        skipCount: 0,
        maxResultCount: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 当前页
      activeName: "1",
      // 未检查项目列表
      unpredictableItems: [
        {
          projectName: "222",
          result: "222",
          state: "未检明细",
        },
        {
          projectName: "222",
          result: "222",
          state: "未检明细",
        },
        {
          projectName: "222",
          result: "222",
          state: "未检明细",
        },
        {
          projectName: "222",
          result: "222",
          state: "未检明细",
        },
      ],
    };
  },
  watch: {
    // 子组件选择的 activeName
    activeName: {
      handler(val) {
        // console.log("子组件选择的 activeName", val);
        this.$emit("tabActiveChange", val);
      },
      immediate: true,
    },
  },
  computed: {
    // 未检项目总数
    unpredictableItemsTotal() {
      let result = this.unpredictableItems.length;
      result = result > 0 ? result : "";
      return result;
    },
  },
  methods: {
    // tab-click
    handleClick() {},
  },
};
</script>

<style>
</style>
